<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	    <script type="text/javascript" src="/js/jquery-3.2.1.min.js" ></script>
		<script type="text/javascript" src="/js/bootstrap.min.js" ></script>
		<script type="text/javascript" src="/js/my-js.js" ></script>
		<link rel="stylesheet" href="/css/bootstrap.min.css" />
		<link rel="stylesheet" href="/css/my-css.css" />
		<script type="text/javascript" src="/js/marked.min.js" ></script>
		<script type="text/javascript" src="/js/jquery.cookie.js" ></script>
		<script type="text/javascript" src="/js/vue.min.js" ></script>
		<title>在线编写Markdown</title>
		<style type="text/css">
		    body {font-family: "微软雅黑";}
		    #input {
		        font-size: 16px;
		        width: 100%;
		        height: 550px;
		        resize: none;
		    }
		    #output {
		        height:550px;
		        border: 1px solid darkgrey;
		        font-size: 16px;
		        word-wrap: break-word;
		        overflow-y: scroll;
		    }
			#output img {
			    max-width: 95%;
			    min-width: 400px;
			    margin: 10px 0 10px 0;
			}
		</style>
	</head>
	<body>
	    <div id="header"></div>
	    <script type="text/javascript">moralLoad("#header", "/html/header.html")</script>
	    <div class="container">
	        <div class="row">
			    <div class="col-xs-offset-1 col-xs-10">
		            <ol class="breadcrumb" style="background-color: inherit; margin-bottom: 0;">
		                <li><a href="#">首页</a></li>
		                <li class="active">Markdown在线编辑器</li>
		            </ol>
		        </div>
		        <div class="col-xs-12 col-md-6"><textarea id="input"></textarea></div>
		        <div class="col-xs-12 col-md-6" id="output"></div>
	        </div>
	    </div>
	</body>
	<script>
	   var $input = $("#input");
	   var $output = $("#output");
	   $input.on("input", function() {	
		   $output.html(marked($input.val()));
	   });
	   $input.on('keydown', function(e) {
           if (e.keyCode == 9) {
               e.preventDefault();
               var indent = '    ';
               var start = this.selectionStart;
               var end = this.selectionEnd;
               var selected = window.getSelection().toString();
               selected = indent + selected.replace(/\n/g, '\n' + indent);
               this.value = this.value.substring(0, start) + selected + this.value.substring(end);
               this.setSelectionRange(start + indent.length, start + selected.length);
           }
       });
	</script>
</html>
